import { ColumnDef } from '@tanstack/react-table'
import { MoreHorizontal, ChevronRight, ChevronDown } from 'lucide-react'

import { Button } from '@renderer/components/ui/button'
import { Checkbox } from '@renderer/components/ui/checkbox'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@renderer/components/ui/dropdown-menu'

import usePluginLocalStore from '@renderer/store/plugin-local'
import usePluginLocalToolStore from '@renderer/store/plugin-local-tool'
import { useShallow } from 'zustand/react/shallow'
import { DrawerTrigger } from '@renderer/components/ui/drawer'
import type { PluginLocal } from '@shared/types/entity'
import { useMemo } from 'react'
const deleteByMark = async (mark: string) => {
  await window.api.pluginLocal.deleteByMark(mark)
}

export const useColumns = (): ColumnDef<PluginLocal>[] => {
  const { initData, editFrom, setDrater } = usePluginLocalStore(
    useShallow((state) => ({
      initData: state.initData,
      editFrom: state.editForm,
      setDrater: state.setDrater
    }))
  )
  const { toolAddForm } = usePluginLocalToolStore(
    useShallow((state) => ({
      toolAddForm: state.addForm
    }))
  )
  return useMemo((): ColumnDef<PluginLocal>[] => {
    return [
      {
        id: 'select',
        header: ({ table }) => (
          <Checkbox
            checked={
              table.getIsAllPageRowsSelected() ||
              (table.getIsSomePageRowsSelected() && 'indeterminate')
            }
            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
            aria-label="Select all"
            className="translate-y-[2px]"
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            checked={row.getIsSelected()}
            onCheckedChange={(value) => row.toggleSelected(!!value)}
            aria-label="Select row"
            className="translate-y-[2px]"
          />
        ),
        enableSorting: false,
        enableHiding: false,
        size: 20
      },
      {
        id: 'expander',
        size: 20,
        header: () => null,
        enableSorting: false,
        enableHiding: false,
        cell: ({ row }) => {
          console.log('row.getCanExpand()', row.getCanExpand())
          return (
            <button
              {...{
                onClick: row.getToggleExpandedHandler(),
                style: { cursor: 'pointer' }
              }}
            >
              {row.getIsExpanded() ? (
                <ChevronDown className="h-4 w-4" />
              ) : (
                <ChevronRight className="h-4 w-4" />
              )}
            </button>
          )
        }
      },
      {
        accessorKey: 'mark',
        header: '标识',
        size: 100
      },
      {
        accessorKey: 'name',
        header: '名称',
        size: 100
      },
      {
        id: 'actions',
        header: '操作',
        size: 100,
        cell: ({ row }) => {
          const payment = row.original
          return (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="h-8 w-8 p-0">
                  <span className="sr-only">Open menu</span>
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DrawerTrigger asChild>
                  <DropdownMenuItem
                    onClick={() => {
                      toolAddForm(payment.mark)
                      setDrater('tool', true)
                    }}
                  >
                    新增工具
                  </DropdownMenuItem>
                </DrawerTrigger>
                <DrawerTrigger asChild>
                  <DropdownMenuItem
                    onClick={() => {
                      editFrom('edit', payment)
                      setDrater('plugin', true)
                    }}
                  >
                    编辑
                  </DropdownMenuItem>
                </DrawerTrigger>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onClick={() => {
                    deleteByMark(payment.mark)
                    initData()
                  }}
                >
                  删除
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )
        }
      }
    ]
  }, [initData, editFrom, toolAddForm])
}
